<template>
  <div>
    <div class="header">
      <div class="inputItem">
        <div class="title">合同编号</div>
        <div class="inputBox">
          <el-input v-model="contractNumber" @keyup.enter.native="getList1"></el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">供应商名称</div>
        <div class="inputBox">
          <el-input v-model="supplierName" @keyup.enter.native="getList1"></el-input>
        </div>
      </div>
  
      <!-- 查询 -->
      <div class="Btn_grounp">
        <el-button class="searchBtn" type="primary" size="small" icon="el-icon-search" @click="getList1">查询</el-button>
        <el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
        <el-button class="searchBtn" style="margin-left: 0px" type="primary" size="small" icon="el-icon-plus"
          @click="showAddDialog(1)">新增</el-button>
      </div>
    </div>
    <!--    列表界面    -->
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" ref="table2">
          <el-table-column align="center" label="序号" width="60">
            <template slot-scope="scope">
              <div>{{ scope.$index + 1 + Number(size) * (pageCurrent - 1) }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="contractType" label="合同状态">
            <template slot-scope="scope">
              <div class="tag" v-if="scope.row.contractType.value === 1">
                <div class="dian"></div>
                <div class="text">合同执行中</div>
              </div>
              <div class="tag grey" v-if="scope.row.contractType.value === 2">
                <div class="dian" style="color: #a8b0b6"></div>
                <div class="text">合同已到期</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="contractNumber" label="合同编号"></el-table-column>
          <el-table-column align="center" prop="supplierName" label="供应商名称"></el-table-column>
  
          <el-table-column align="center" label="合同期限">
            <template slot-scope="scope">
              <div>
                {{ scope.row.contractPeriod + scope.row.contractPeriodUnit }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" @click="
                  $router.push(
                    '/contractManagement/supplierContract/Detail/' +
                    scope.row.contractId
                  )
                  ">详情</el-button>
                <el-button type="text" size="small"
                  @click="getDetail(scope.row.contractId), showAddDialog(2)">编辑</el-button>
                <el-button type="text" size="small" @click="deleteSupplierContract(scope.row.contractId)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
          :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- 添加合同弹窗 -->
    <el-dialog class="dialog" :title="dialogName" :visible.sync="visibleAddBox" width="840px">
      <el-form ref="addContractForm" :model="addContractForm" :rules="addContractRules" label-width="110px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="供应商" prop="cargoOwnerName">
              <el-select v-model="addContractForm.supplierName" filterable remote reserve-keyword style="width: 100%"
                placeholder="请选择内容" @change="changeSupplierName" :remote-method="supplierNameSearch"
                :loading="supplierNamesLoading">
                <el-option v-for="item in supplierNamesOps" :key="item.index" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNumber" placeholder="请输入内容">
              <el-input v-model="addContractForm.contractNum" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对应货主合同" prop="projectName">
              <el-select v-model="addContractForm.cargoContractName" filterable remote reserve-keyword style="width: 100%"
                placeholder="请选择内容" @change="changeCargoCName" :remote-method="cargoCNameSearch"
                :loading="cargoCNamesLoading">
                <el-option v-for="item in cargoCNameOps" :key="item.index" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计费标准" prop="charging">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.charging" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.chargingUnit"
                  :placeholder="addContractForm.chargingUnit">
                  <el-option v-for="item in WeightArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算账期" prop="settlementPeriod">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.settle" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.settleUnit"
                  :placeholder="addContractForm.settleUnit">
                  <el-option v-for="item in timeArr" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票类型" prop="invoiceType">
              <el-select v-model="addContractForm.invoiceType" style="width: 100%">
                <el-option v-for="item in invoiceArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票税率" prop="taxRate">
              <el-input v-model="addContractForm.invoiceRatio" class="append_unit" placeholder="请输入内容">
                <div slot="suffix" style="
                    padding-right: 10px;
                    padding-left: 10px;
                    line-height: 32px;
                  ">
                  %
                </div>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同期限" prop="contractPeriod">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.period" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.periodUnit"
                  :placeholder="addContractForm.periodUnit">
                  <el-option v-for="item in termArr" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金" prop="earnestMoney">
              <el-input v-model="addContractForm.earnestMoney" class="append_unit" placeholder="请输入内容">
                <div slot="suffix" style="
                    padding-right: 10px;
                    padding-left: 10px;
                    line-height: 32px;
                  ">
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同开始日期" prop="contractStartTime">
              <el-date-picker style="width: 100%" v-model="addContractForm.startDate" type="date" placeholder="请选择日期"
                class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束日期" prop="contractEndTime">
              <el-date-picker style="width: 100%" v-model="addContractForm.endDate" type="date" placeholder="请选择日期"
                class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同附件" prop="signImage">
              <!-- action	必选参数，上传的地址 -->
              <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
              <!-- on-remove	文件列表移除文件时的钩子 -->
              <!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->

              <!-- limit	最大允许上传个数 -->
              <!-- on-exceed	文件超出个数限制时的钩子 -->
              <!-- file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
              <el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
                :before-remove="beforeRemove" :file-list="fileList" :limit="1" :on-exceed="handleExceed"
                :on-success="uploadFileSuccess" :headers="headers" :auto-upload="true" ref="uploadRef">
                <el-button size="small" class="uploadBtn" type="primary">文件上传</el-button>
                <span slot="tip" class="el-upload__tip">支持PDF、JPG等格式</span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同备注" prop="contractRemarks" class="notes" placeholder="请输入内容">
              <el-input v-model="addContractForm.remark" resize="none" :rows="3" type="textarea" maxlength="200"
                show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="visibleAddBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="cofime">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
import BASEURL from "@/http/BaseUrl";

export default {
  data() {
    return {
      contractNumber: "", //搜索栏合同编号
      supplierName: "",
      records: [], //列表数据
      data: {
        total: "0",
        size: "0",
      }, //分页数据
      pageCurrent: "1",
      size: "10",
      visibleAddBox: false,
      dialogName: "新增合同", //弹窗标题
      supplierNames: [], //供应商名称列表
      supplierNamesOps: [], //供应商匹配名称列表
      supplierNamesLoading: true,
      cargoCNames: [
        //货主合同名称列表
        { index: 1, id: "1", name: "唐洪飞" },
        { index: 2, id: "2", name: "周杰伦" },
      ],
      cargoCNameOps: [], //货主合同名称匹配列表
      cargoCNamesLoading: true,
      addContractForm: {
        contractId: "",
        contractingPartyId: "",
        supplierName: "",
        contractNum: "",
        supplierCargoContractId: "",
        cargoContractName: "",
        charging: "",
        chargingUnit: "",
        settle: "",
        settleUnit: "",
        invoiceType: "",
        invoiceRatio: "",
        period: "",
        periodUnit: "",
        earnestMoney: "",
        startDate: "",
        endDate: "",
        fileUrls: "",
        remark: "",
        projectName: "",
      },
      addContractRules: {
        supplierName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        contractNum: [{ required: true, message: "不能为空", trigger: "blur" }],
        cargoContractName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        charging: [{ required: true, message: "不能为空", trigger: "blur" }],
        settle: [{ required: true, message: "不能为空", trigger: "blur" }],
        period: [{ required: true, message: "不能为空", trigger: "blur" }],
        periodUnit: [{ required: true, message: "不能为空", trigger: "blur" }],
        startDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        endDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceType: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceRatio: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        earnestMoney: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BASEURL.TCHYURL + "/file/upload",
      correspondingContract: [{ value: "1", label: "唐货主合同" }],
      // 计费标准选项
      WeightArr: [
        { value: "吨", label: "吨" },
        { value: "千克", label: "千克" },
      ],
      WeightValue: "吨",
      timeArr: [
        // 结算周期选项
        { value: "月", label: "月" },
        { value: "年", label: "年" },
      ],
      timeValue: "月",
      invoiceArr: [
        // 发票类型选择
        { value: 0, label: "无需开票" },
        { value: 1, label: "电子发票" },
        { value: 2, label: "增值税专用发票" },
        { value: 3, label: "普通发票" },
      ],
      invoiceValue: "年",
      termArr: [
        // 合同期限 选择
        { value: "月", label: "月" },
        { value: "年", label: "年" },
      ],
      termValue: "年",
      fileList: [],
      permissions: {}
    };
  },


  created() {
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
  },
  methods: {
    changePages(val) {
      this.pageCurrent = val;
      this.getList();
    },
	getList1(){
		this.pageCurrent=1;
		this.getList();
	},
    //取得合同列表
    getList() {
      let params = {
        pageNo: this.pageCurrent,
        pageCount: this.size,
        contractNumber: this.contractNumber,
        supplierName:this.supplierName
      };

      httpApi.contractManagementApi
        .getSupplierContractList(params)
        .then((res) => {
          // console.log("getSupplierContractList=",res)
          if (res.data.code == 200) {
            this.data = res.data.data;
            this.records = res.data.data.records;
          }


        });
    },
    //取得供应商表单回填数据
    getDetail(id) {
      // console.log("contractId=" + id)
      let v = this;
      let args = {
        contractId: id,
      };
      httpApi.contractManagementApi
        .getSupplierContractDetails(args)
        .then(function (rsp) {
          let dat = rsp.data.data;
          // console.log("供应商合同信息获取完毕,rsp=", rsp)
          if (rsp.data.code == 500) {
            alert(rsp.data.msg);
            return;
          }
          v.addContractForm.contractId = id;
          v.addContractForm.contractingPartyId = dat.contractingPartyId;
          v.addContractForm.supplierName = dat.supplierName;
          v.addContractForm.contractNum = dat.contractNumber;
          v.addContractForm.supplierCargoContractId =
            dat.supplierCargoContractId;
          v.addContractForm.cargoContractName = dat.cargoContractName;
          v.addContractForm.charging = dat.charging;
          v.addContractForm.chargingUnit = dat.chargingUnit;
          v.addContractForm.settle = dat.settlementPeriod;
          v.addContractForm.settleUnit = dat.settlementPeriodUnit;
          v.addContractForm.invoiceType = v.invoiceArr[dat.invoiceType].value;
          v.addContractForm.invoiceRatio = dat.taxRate;
          v.addContractForm.period = dat.contractPeriod;
          v.addContractForm.periodUnit = dat.contractPeriodUnit;
          v.addContractForm.earnestMoney = dat.earnestMoney;
          v.addContractForm.startDate = dat.contractStartTime;
          v.addContractForm.endDate = dat.contractEndTime;
          v.addContractForm.fileUrls = dat.signImage;
          v.addContractForm.remark = dat.contractRemarks;
          v.addContractForm.projectName = dat.projectName;
          //回显文件名
          let tmp = {
            name: dat.signImage.split("/")[dat.signImage.split("/").length - 1],
            url: dat.signImage,
          };
          v.fileList.length = 0;
          v.fileList.push(tmp);
          //如果是新增，则跳过供应商名赋值
          if (
            v.addContractForm.supplierName == null ||
            v.addContractForm.supplierName == undefined ||
            v.addContractForm.supplierName == ""
          )
            return;
          // console.log("搜索指定的供应商姓名")
          for (let item of v.supplierNamesOps) {
            if (item.id == v.addContractForm.supplierId) {
              v.addContractForm.supplierName = item.name;
              // console.log("已找到匹配的供应商名称")
              return;
            }
          }
          // console.log("未找到指定的供应商名称")
        });
    },
    //删除指定的供应商合同
    /*   deleteSupplierContract(id) {
              let tmp = {
                  "contractId": id
              }
              let v=this
              httpApi.contractManagementApi.deleteSupplierContract(tmp).then(function (rsp) {
                  // console.log(JSON.stringify(rsp.data))
                  v.$message.success("操作成功")
                  v.getList()
              })
          }, */
    //删除指定合同
    deleteSupplierContract(contractId) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //语法糖{属性名:动态属性值的变量} 名字相同合写
          //{contractId:contractId}  => {contractId}
          httpApi.contractManagementApi
            .deleteSupplierContract({ contractId })
            .then((res) => {
              // console.log('删除结果', res);
              if (res.data.code == 200) {
                this.$message.success("删除成功");
                this.getList();
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    CleanUp() {
      this.contractNumber = "";
      this.supplierName=""
      this.getList1();
    },
    //提交表单数据
    cofime() {
      // this.addContractForm.fileUrls = "ssssss"
      // console.log(this.addContractForm)
      let params = {
        pactId: this.addContractForm.contractId + "",
        cargoPactId: this.addContractForm.supplierCargoContractId,
        charging: this.addContractForm.charging,
        chargingUnit: this.addContractForm.chargingUnit,
        endDate: this.addContractForm.endDate,
        invoiceRate: this.addContractForm.invoiceRatio,
        invoiceType: this.addContractForm.invoiceType,
        pactNo: this.addContractForm.contractNum,
        period: this.addContractForm.period,
        periodUnit: this.addContractForm.periodUnit,
        earnestMoney: this.addContractForm.earnestMoney,
        projectName: this.addContractForm.projectName,
        remark: this.addContractForm.remark,
        startDate: this.addContractForm.startDate,
        steel: this.addContractForm.settle,
        steelUnit: this.addContractForm.settleUnit,
        supplierId: this.addContractForm.contractingPartyId,
        url: this.addContractForm.fileUrls,
      };
      // console.log("params=" + JSON.stringify(params))
      let v = this;
      httpApi.contractManagementApi
        .editSupplierContractInfo(params)
        .then(function (rsp) {
          // console.log(JSON.stringify(rsp.data))
          if (rsp.data.code == 200) {
            v.$message.success("操作成功");
            //更新列表
            v.getList();
          }
        });
      this.visibleAddBox = false;
    },
    handleRemove(file, fileList) {
      // console.log("handleRemove",file, fileList)
    },
    //点击文件列表中的文件，下载到本地
    handlePreview(file) {
      // console.log('下载的文件信息=',file);
      // window.location.href = file.url;
      window.open(file.url);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    //文件移除操作触发事件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //文件上传
    uploadFileSuccess(response, file, fileList) {
      // console.log(JSON.stringify(response.data))
      this.addContractForm.fileUrls = response.data.url;
    },
    // 新增/编辑弹窗
    showAddDialog(mode) {
      if (mode == 1) {
        //新增模式
        this.dialogName = "新增合同";
        //将合同ID置为空
        this.addContractForm.contractId = "";
        //清空表单属性
        for (let item in this.addContractForm) {
          this.addContractForm[item] = "";
        }
        //重设表单单位属性
        this.addContractForm.chargingUnit = this.WeightArr[0].value;
        this.addContractForm.periodUnit = this.timeArr[0].value;
        this.addContractForm.settleUnit = this.timeArr[0].value;
      } else if (mode == 2) {
        //编辑模式
        this.dialogName = "编辑合同";
      }
      //延迟执行；清空上传文件列表
      this.$nextTick(function () {
        this.$refs.uploadRef.clearFiles();
      });
      let v = this;
      //组装请求参数
      let params2 = {
        like: "",
        size: 200,
      };
      //请求供应商名称列表
      httpApi.contractManagementApi.supplierNames(params2).then(function (rsp) {
        // console.log("请求供应商名称列表响应=", rsp)
        v.supplierNames = JSON.parse(JSON.stringify(rsp.data.data));
        v.supplierNamesOps = rsp.data.data;
        v.supplierNamesLoading = false;
        //剔除没有name的数据
        for (let i = 0; i < v.supplierNamesOps.length; i++) {
          // // console.log("v.cargoCNameOps[i]="+JSON.stringify(v.cargoCNameOps[i]))
          if (
            v.supplierNamesOps[i].name == null ||
            v.supplierNamesOps[i].name == ""
          ) {
            // console.log("被移除的数据=" + JSON.stringify(v.supplierNamesOps[i]))
            v.$delete(v.supplierNamesOps, i);
            i--;
          }
          v.supplierNamesOps[i].index = i;
        }
        // console.log("供应商姓名列表获取完毕", v.supplierNamesOps)
      });
      //组装请求参数
      let params = {
        like: "",
        size: 200,
      };
      //请求货主合同名称列表
      httpApi.contractManagementApi
        .cargoContractNames(params)
        .then(function (rsp) {
          v.cargoCNames = JSON.parse(JSON.stringify(rsp.data.data));
          v.cargoCNameOps = rsp.data.data;
          v.cargoCNamesLoading = false;
          //剔除没有name的数据
          for (let i = 0; i < v.cargoCNameOps.length; i++) {
            // // console.log("v.cargoCNameOps[i]="+JSON.stringify(v.cargoCNameOps[i]))
            if (
              v.cargoCNameOps[i].name == null ||
              v.cargoCNameOps[i].name == ""
            ) {
              // console.log("被移除的数据=" + JSON.stringify(v.cargoCNameOps[i]))
              v.$delete(v.cargoCNameOps, i);
              i--;
            }
            v.cargoCNameOps[i].index = i;
          }
          // console.log("货主合同名称列表获取完毕", v.cargoCNameOps)
          // // console.log("货主合同名称列表获取完毕=" + JSON.stringify(v.cargoCNameOps))
        });
      this.visibleAddBox = true;
    },
    //货主合同名称搜索
    cargoCNameSearch(query) {
      // console.log("searchKey=" + query)
      this.cargoCNameOps.length = 0;
      this.cargoCNamesLoading = true;
      for (let item of this.cargoCNames) {
        //有的数据不完整，部分字段为空，因此必须判空
        if (
          item == null ||
          item == undefined ||
          item.name == null ||
          item.name == undefined
        )
          continue;
        if (item.name.indexOf(query) != -1) {
          this.cargoCNameOps.push(item);
        }
      }
      this.cargoCNamesLoading = false;
      // console.log("货主合同名称搜索完成,cargoCNameOps=", this.cargoCNameOps)
    },
    //货主更换
    changeCargoCName(id) {
      // console.log("选中的货主合同ID=" + id)
      this.addContractForm.supplierCargoContractId = id;
    },
    //供应商更换
    changeSupplierName(id) {
      // console.log("选中的供应商ID=" + id)
      this.addContractForm.contractingPartyId = id;
    },
    //供应商名称搜索
    supplierNameSearch(query) {
      // console.log("searchKey=" + query)
      this.supplierNamesOps.length = 0;
      this.supplierNamesLoading = true;
      for (let item of this.supplierNames) {
        //有的数据不完整，部分字段为空，因此必须判空
        if (
          item == null ||
          item == undefined ||
          item.name == null ||
          item.name == undefined
        )
          continue;
        if (item.name.indexOf(query) != -1) {
          this.supplierNamesOps.push(item);
        }
      }
      this.supplierNamesLoading = false;
      // console.log("供应商名称搜索完成")
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  mounted() {
    this.getList();
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table2.bodyWrapper.addEventListener('scroll',this.scrollEvent,false)
    // 激活设置滚动位置
    this.$refs.table2.bodyWrapper.scrollTop=this.$route.meta.scrollTop 
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table2.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;

  .Btn_grounp {
    display: flex;
    margin-left: auto;

    .searchBtn {
      width: 80px;
      height: 32px;
      color: #fff;
      font-size: 12px;
      background-color: #1890ff;
    }

    .clearBtn {
      width: 80px;
      height: 32px;
      color: #262626;
      font-size: 12px;
      margin-left: 16px;
      margin-right: 16px;
    }
  }

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  padding: 0px 30px;
  height: calc(100vh - 267px);

  .list {
    width: 100%;

    height: calc(100% - 48px);

    .tag {
      width: 88px;
      height: 28px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background-color: #ecf5fe;
      color: #1890ff;
      margin: 0 auto;

      &.grey {
        color: #a8b0b6;
        background-color: #a8b0b6;
      }

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
        background-color: #1890ff;
      }
    }

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 364px);

      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      height: 48px;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
        height: 48px;
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .waitPass {
        background-color: #ecf5fe;
        color: #1890ff;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      height: 48px;
      display: flex;
      align-items: center;
      margin-left: auto;
    }
  }
}

.dialog {

  // 标题
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 19px 20px 17px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 40px 24px;
  }

  //   表格
  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
  }

  .data_picker {
    ::v-deep .el-input__inner {
      padding-left: 30px;
      width: 100%;
    }

    ::v-deep .el-input__prefix {
      //display: none;
    }
  }

  // 上传文件
  .upload {
    .uploadBtn {
      width: 80px;
      height: 32px;
      background-color: #fff;
      color: #000;
      font-size: 12px;
      cursor: pointer;
      border-radius: 4px;
      border-color: #ddd;
      transition: 0.2s;
      margin-right: 12px;
      margin-bottom: 8px;

      &:hover {
        opacity: 0.8;
        background-color: #ccc;
      }
    }

    .el-upload__tip {
      color: #cccccc;
      font-size: 12px;
    }

    ::v-deep .el-upload-list {
      background-color: #eef3f9;
    }

    ::v-deep .el-upload-list__item-name {
      padding: 7px 4px;
      color: #409eff;
      font-size: 12px;
      transition: 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }

    ::v-deep .el-icon-document:before {
      color: #409eff;
      font-size: 16px;
    }

    ::v-deep .el-upload-list__item .el-icon-close {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  .inputSelect_left {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 4px 0px 0px 4px;
    }
  }

  .inputSelect_right {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 0px 4px 4px 0px;
      border-left: none;
      background-color: #f5f7fa;
      font-size: 12px;
      color: #606266;
    }
  }

  ::v-deep .el-input__icon {
    line-height: 0;
  }

  ::v-deep .el-form-item__content {
    line-height: 0;
  }

  .notes ::v-deep .el-textarea .el-input__count {
    bottom: 15px;
    color: #c0c4cc;
  }
}
</style>
